<template>
    <div>
        <navBar :navTitle="loginType" v-if="loginType === $t('Denglu')" showRight showLeftLan :showLeft="true" />
        <navBar :navTitle="loginType" v-else @fnBtnLeft="fnBtnLeft" :leftBack="false" />

        <div class="full-width">
            <van-image class="login-header" :src="logoUrl" />

            <!--登錄-->
            <van-form ref="refFormLogin" v-show="loginType === $t('Denglu')" class="public-form">
                <div>
                    <div><i class="iconfont icon-shouji color-theme"></i><span>{{ $t('Dianhua') }}</span></div>
                    <van-field v-model.trim="formLogin.tel" clearable :placeholder="$t('Qingshuru')"
                        :rules="[{ required: true, message: $t('Qingshuru') }]" />
                </div>
                <div>
                    <div><i class="iconfont icon-mima1 color-theme"></i><span>{{ $t('Jiesuomima') }}</span></div>
                    <van-field v-model.trim="formLogin.password" clearable type="password"
                        :placeholder="$t('Qingshurumima')" :rules="[{ required: true, message: $t('Qingshurumima') }]" />
                </div>

                <van-button block type="info" native-type="submit" class="btn-login" @click="fnLogin" v-btn-re-click>{{
                    $t('Denglu') }}</van-button>
                <van-button block type="text" native-type="button" class="btn-text"
                    @click="fnGoRegister">{{ $t('Lijizhuce') }}</van-button>

            </van-form>

            <!--註冊-->
            <van-form ref="refFormRegister" v-show="loginType === $t('Zhuce')" class="public-form">
                <div>
                    <div><i class="iconfont icon-shouji color-theme"></i><span>{{ $t('Dianhua') }}</span></div>
                    <van-field v-model.trim="formRegister.tel" clearable :placeholder="$t('Qingshuru')" autocomplete="off"
                        :rules="[{ required: true, message: $t('Qingshuru') },
                        { validator: taiwanPass, message: $t('Shoujihaogeshi') }]" />
                </div>
                <div>
                    <div><i class="iconfont icon-mima1 color-theme"></i><span>{{ $t('Jiesuomima') }}</span></div>
                    <van-field v-model.trim="formRegister.password" clearable type="password"
                        :placeholder="$t('Qingshurumima')" :rules="[{ required: true, message: $t('Qingshurumima') }]" />
                </div>
                <div>
                    <div><i class="iconfont icon-mima1 color-theme"></i><span>{{ $t('YanZhengmima') }}</span></div>
                    <van-field v-model.trim="formRegister.sure_password" clearable type="password"
                        :placeholder="$t('YanZhengmima')" :rules="[{ required: true, message: $t('YanZhengmima') },
                        { validator: checkPass, message: $t('Liangcimima') }]" />
                </div>
                <div>
                    <div><i class="iconfont icon-yaoqingma color-theme"></i><span>{{ $t('Yaoqingma') }}</span></div>
                    <van-field v-model.trim="formRegister.code_str" clearable :placeholder="$t('Qingyaoqingma')" />
                </div>

                <van-button block type="info" native-type="submit" class="btn-login" @click="fnRegisterMember"
                    v-btn-re-click>{{ $t('Zhuce') }}</van-button>
            </van-form>
        </div>

    </div>
</template>

<script>
import { index_login_api, quser_add_api } from "@/assets/js/api"

import logoUrl from "@/assets/images/logo.png"

export default {
    name: "login",
    data() {
        return {
            logoUrl,
            loginType: '', //登錄 , 註冊

            formLogin: {
                tel: "", //17688829465
                password: "", //123456ld
            },

            formRegister: {
                tel: "", //17688829465
                password: "", //123456ld
                sure_password: "", //123456ld
                code_str: "", //MSBxabssF5bD
            }
        };
    },
    methods: {
        /*確認密碼 验证*/
        checkPass(newPass) {
            console.log(newPass);
            return newPass === this.formRegister.password;
            // return /^1\d{10}$/.test(val) // 返回true或false
        },
        /*台湾手机號码*/
        taiwanPass(val) {
            //console.log(val);
            //console.log(/^(09\d{8})$/.test(val));
            //return /^(09\d{8})$/.test(val)
            return val.length > 8 && val.length < 12
        },

        fnFormResetValidation() {
            this.$refs["refFormRegister"].resetValidation();
            this.$refs["refFormLogin"].resetValidation();
        },

        /* 登錄 */
        fnLogin() {
            this.$refs.refFormLogin.validate().then(() => {
                index_login_api({
                    tel: this.formLogin.tel,
                    password: this.formLogin.password,
                }).then(res => {
                    if (res.code == 200) {
                        this.$toast(res.msg || this.$t('Dengluchenggong'));
                        this.fnFormResetValidation();
                        localStorage.setItem("userId", res.data.id);
                        localStorage.setItem("tel", this.formLogin.tel);
                        setTimeout(() => {
                            this.$router.push({
                                path: "/index",
                            })
                        }, 1500)
                    }
                })
            }).catch(res => { })
        },

        fnGoRegister() {
            Object.assign(this.$data.formLogin, this.$options.data().formLogin);
            this.loginType = this.$t('Zhuce')
            // this.$refs["refFormRegister"].resetValidation();
            this.fnFormResetValidation();
        },
        /* 註冊 */
        fnRegisterMember() {
            // this.$toast("註冊成功！");
            // this.loginType = "登錄";
            // Object.assign(this.$data.formRegister, this.$options.data().formRegister);
            // this.fnFormResetValidation();
            // return
            this.$refs.refFormRegister.validate().then(() => {
                quser_add_api({
                    tel: this.formRegister.tel,
                    password: this.formRegister.password,
                    code_str: this.formRegister.code_str,
                }).then(res => {
                    if (res.code == 200) {
                        this.$toast(res.msg || this.$t('Zhucechenggong'));
                        setTimeout(() => {
                            this.loginType = this.$t('Denglu');
                            Object.assign(this.$data.formRegister, this.$options.data().formRegister);
                            this.fnFormResetValidation();
                        }, 500)

                    }
                })
            }).catch(res => { })
        },
        fnBtnLeft() {
            Object.assign(this.$data.formRegister, this.$options.data().formRegister);
            this.loginType = this.$t('Denglu');
            this.fnFormResetValidation();
        },
    },
    created() {
        this.loginType = this.$t('Denglu')
        // this.fnLogin();

        // this.fnRegisterMember();
    },

};
</script>
<style lang="scss" scoped>
.login-header {
    text-align: center;
    width: 100%;
    margin: 30px 0;

    /deep/ .van-image__img {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }
}

.btn-login {
    margin-top: 20px;
    border-radius: 6px;
}
</style>